<template>
  <div id="index">
    <!-- 轮播图 -->
    <Swiper :bannerList="bannerList" />
    <!-- 首页内容 -->
    <section class="container">
      <!-- 区块链服务 -->
      <div class="service-cont">
        <!-- 标题 -->
        <div class="service-dir">
          <h5>区块链服务</h5>
          <p>量子启示区块链面向各行业领域，提供行业区块链产品，</p>
          <p>满足商业场景中用户诉求；打造可用、易用的公共区块链网络。</p>
        </div>
        <!-- 服务盒子 -->
        <ul class="service-label">
          <li v-for="(item, index) in serviceList" :key="index">
            <div class="label-icon">
              <img :src="item.iconUrl" alt />
            </div>
            <div class="label-cont">
              <h6>{{item.labelTitle}}</h6>
              <p v-for="(p, index) in item.labelDir" :key="index">{{p}}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 为什么选择我们 -->
    <section class="select-my">
      <div class="container">
        <div class="service-dir">
          <h5>为什么选择我们</h5>
          <p>专业性、创新性、增殖性、应有尽有</p>
        </div>
        <div class="count-list">
          <!-- 数字 -->
          <ul>
            <li class="list" v-for="(item, index) in selectMyList" :key="index">
              <i></i>
              <p class="iconfont" v-html="item.icon"></p>
              <div class="nums">{{item.num}}</div>
              <div class="name">{{item.details}}</div>
            </li>
          </ul>
        </div>
        <div class="cont-label">
          <ul>
            <li v-for="(item, index) in selectLabel" :key="index">
              <div class="icon-cont">
                <img :src="item.iconUrl" alt />
                <div class="dir">
                  <h6>{{item.title}}</h6>
                  <p v-for="(p, key) in item.dir" :key="key">{{p}}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 合作伙伴 -->
    <section class="cooperation">
      <div class="container">
        <div class="title">
          <h6>合作伙伴</h6>
        </div>
        <div class="cooperation-img">
          <img src="../assets/cooperation.png" alt="">
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Swiper from "~/components/_Swiper";
export default {
  name: "index",
  data() {
    return {
      data: "hello world",
      bannerList: [
        {
          bgUrl: require("~/assets/banner1.png"),
          bannerName: "区块链解决方案",
          bannerEnName: "Block Chain Solution",
          className: "banner1"
        },
        {
          bgUrl: require("~/assets/banner2.png"),
          bannerName: "区块链",
          btnName: "应用服务",
          className: "banner2",
          showbtn: true
        },
        {
          bgUrl: require("~/assets/banner3.png"),
          bannerName: "区块链 —",
          className: "banner3",
          bannerEnName: "时间打造信息安全锁"
        },
        {
          className: "banner4",
          aboutList: [
            {
              num: "10+",
              label: "年技术沉淀"
            },
            {
              num: "60+",
              label: "款创新产品"
            },
            {
              num: "200+",
              label: "人专业团队"
            },
            {
              num: "300+",
              label: "家全球客户"
            }
          ]
        }
      ],
      serviceList: [
        {
          iconUrl: require("~/assets/wallet.png"),
          labelTitle: "数字钱包",
          labelDir: [
            "支持各种POW & POS以及混合式钱包，",
            "集成多个主流虚拟币钱包，",
            "其中包括比特币、以太坊、莱特币等"
          ]
        },
        {
          iconUrl: require("~/assets/system.png"),
          labelTitle: "数字货币交易系统",
          labelDir: [
            "支持场内币币交易、场外C2C点对点交易、",
            "USDT交易、合约交易四种交易模式"
          ]
        },
        {
          iconUrl: require("~/assets/bi_dev.png"),
          labelTitle: "代币开发",
          labelDir: [
            "代币中文名、代币英文名全称代币发行总额、",
            "代币发行周期代币发行范围、代币初始发行价"
          ]
        },
        {
          iconUrl: require("~/assets/shop_dev.png"),
          labelTitle: "商城开发",
          labelDir: [
            "支持虚拟币单商户、多商户商城、三级分销、",
            "积分商城等功能定制开发。"
          ]
        }
      ],
      selectMyList: [
        {
          icon: "&#xe621;",
          num: "10+",
          details: "年技术沉淀"
        },
        {
          icon: "&#xe61e;",
          num: "60+",
          details: "款创新产品"
        },
        {
          icon: "&#xe61f;",
          num: "200+",
          details: "人专业团队"
        },
        {
          icon: "&#xe620;",
          num: "300+",
          details: "家全球客户"
        }
      ],
      selectLabel: [
        {
          iconUrl: require("../assets/seepgj.png"),
          title: "快速应用构建",
          dir: ["多模式的账本结构及业务模型", "方便快速构建应用"]
        },
        {
          iconUrl: require("../assets/userzc.png"),
          title: "海量用户支撑",
          dir: ["高效交易验证和同步，支撑千", "万甚至亿级用户规模"]
        },
        {
          iconUrl: require("../assets/linux.png"),
          title: "运维",
          dir: ["7*24小时专业团队全程运维，", "免除后期技术维护的烦恼和开支"]
        },
        {
          iconUrl: require("../assets/yinsi.png"),
          title: "隐私权限策略",
          dir: ["丰富的权限策略配置，", "依据应用需求进行隐私保护"]
        },
        {
          iconUrl: require("../assets/cloud.png"),
          title: "区块链即服务",
          dir: ["面向各行业领域，提供可配置", "企业级区块链云服务"]
        },
        {
          iconUrl: require("../assets/kj.png"),
          title: "快捷",
          dir: [
            "时间就是金钱，商场如战场，",
            "丰富的开发技术经验让您快速占领市场"
          ]
        }
      ]
    };
  },
  components: {
    Swiper
  }
};
</script>

<style lang="stylus" scoped>
@import '../static/styl/mixin.styl'
#index
  background-color #fff
  .service-cont, .select-my
    margin-top 112px
    .service-dir
      text-align center
      font-size 20px
      h5
        font-size 42px
        margin-bottom 24px
      p
        line-height 36px
    .service-label
      display flex
      justify-content space-between
      flex-wrap wrap
      margin-bottom 84px
      li
        margin-top 100px
        cursor pointer
        width 500px
        height 376px
        box-shadow 4px 4px 10px 2px rgba(36, 48, 98, 0.18)
        border-radius 4px
        text-align center
        transition 0.5s all
        .label-icon
          margin 60px auto 30px
          width 178px
          height 146px
        .label-cont
          color #223162
          h6
            margin-bottom 20px
            font-size 20px
          p
            font-size 16px
            line-height 24px
        &:hover
          box-shadow 4px 4px 10px 2px rgba(36, 48, 98, 0.5)
          transform translateY(-20px)
  .select-my
    padding-top 99px
    bgImg('../assets/selectmy_bg.png', cover)
    background-color #FAFAFA
    background-position center top
    background-size 100% 56%
    .service-dir
      color #fff
      h5
        marign-bottom 38px
    .count-list
      ul
        padding 113px 0 180px
        display flex
        justify-content space-around
        text-align center
        li
          text-align center
          flex 1
          position relative
          i
            positCenter(50%, 0, auto, auto, 0, -50%)
            height 100px
            width 1
            background-color #fff
            border-right 1px solid #fff
          p
            width 66px
            line-height 66px
            background-color #fff
            font-size 30px
            border-radius 50%
            color #0179FC
            margin 0 auto 30px
          div
            text-align center
            color #fff
          .nums
            font-size 58px
          .name
            font-size 20px
        li:last-child
          i
            border 0
    .cont-label
      ul
        display flex
        justify-content space-between
        flex-wrap wrap
        li
          transition 0.5s all
          margin-bottom 138px
          width 340px
          height 300px
          background-color #fff
          box-shadow 0px 6px 4px 0px rgba(36, 48, 98, 0.28)
          border-radius 4px
          cursor pointer
          .icon-cont
            text-align center
            img
              margin 30px auto 35px
              width 90px
              height 90px
              transition 0.5s all
            .dir
              color #223162
              h6
                font-size 20px
                margin-bottom 25px
              p
                font-size 16px
                line-height 24px
          &:hover
            transform translateY(-20px)
            box-shadow 4px 4px 10px 2px rgba(36, 48, 98, 0.5)
            img
              transform translateY(-6px)
              transform scale(1.1)
  .cooperation
    text-align center
    padding 106px 0 126px
    background-color #fff
    .title
      font-size 42px
      color #100632
      padding-bottom 27px
      border-bottom 1px solid #EEEEEE
    .cooperation-img
      margin-top 54px
</style>
